<template>
  <div>
        <common-head></common-head>
    <div class="title">问题反馈</div>
    <div class="division"></div>
    <p class="title_p">对您给予的帮助和支持，深表感谢！</p>
    <van-dropdown-menu>
      <van-dropdown-item v-model="value1" :options="option1" />
    </van-dropdown-menu>
    <textarea class="content" placeholder="在这里描述您的问题" v-model="value"></textarea>
    <button @click="submit">提交问题</button>
    <p class="islogin" v-show="!condition">
      您尚未登录，请提前
      <span @click="skip">登录</span>
    </p>
    <p class="container_content">反馈内容</p>
    <div class="container">
      <p class="feedback" v-for="item in feedbackContent" :key="item.id">
        <span class="feedback_id">{{item.id+1}}</span>
        {{item.content}}</p>
    </div>
    <common-footer></common-footer>
  </div>
</template>
<script>
export default {
  props: [],
  data () {
    return {
      value1: 0,
      value: '',
      id: 0,
      //   condition: false,
      option1: [
        { text: '问题类型', value: 0 },
        { text: '功能意见', value: 1 },
        { text: '界面意见', value: 3 },
        { text: '性能问题', value: 4 },
        { text: '网络问题', value: 5 },
        { text: '新的需求', value: 6 },
        { text: '其他问题', value: 7 }
      ],
      feedbackContent: []
    }
  },
  mounted () {
    this.getFeedback()
  },
  methods: {
    skip () {
      const reg = /(iPhone|iPad|iPod|iOS|Android)/i
      window.location.href = reg.test(navigator.userAgent) ? '/#/mobilelogin' : '/login'
    },
    async submit () {
      // console.log(this.value)
      // console.log(window.sessionStorage.getItem('isLogin'))
      if (!window.sessionStorage.getItem('isLogin')) {
        this.$toast.fail('您还未登录，请先登录')
        return
      }
      if (this.value.trim().length === 0) {
        this.$toast.fail('请输入内容')
        return
      }
      const { data: res } = await this.$http.post('/api/feedback', {
        id: ++this.id,
        content: this.value
      })
      console.log(res)
      this.$toast.fail('提交反馈成功')
      this.value = ''
      this.getFeedback()
    },
    // 获取反馈数据
    async getFeedback () {
      const { data: res } = await this.$http.get('/api/feedback')

      this.feedbackContent = res.data
      console.log(this.feedbackContent)
    }
  },
  computed: {
    condition () {
      return window.sessionStorage.getItem('isLogin')
    }
  }
}
</script>
<style scoped lang="less">
.title {
  margin-top: 70px;
  margin-left: 30px;
  font-size: 16px;
  margin-bottom: 10px;
}
.division {
  border-top: 1px solid #e8e8e8;
}
.title_p {
  font-size: 17px;
  margin-left: 30px;
  font-weight: 700;
  color: #424242;
}
.van-dropdown-menu {
  margin-left: 30px;
  margin-top: 20px;
  // border: 1px solid #ccc;
  width: 300px;
  border: 1.2px solid #e8e8e8;
}
.content {
  margin-top: 20px;
  margin-left: 30px;
  height: 150px;
  width: 75%;
  border: 1.2px solid #e8e8e8;
  resize: none;
  font-size: 13px;
  padding-left: 15px;
}
button {
  width: 200px;
  height: 50px;
  // margin-left: 90px;
  margin-left: 30px;
  margin-top: 20px;
  background-color: #ff6700;
  border: none;
}
.islogin {
  margin-top: 20px;
  margin-left: 30px;
  font-size: 16px;
  span {
    color: #ff6700;
  }
}
.container_content {
  font-size: 14px;
    width: 300px;
  margin-top: 30px;
  margin-left: 30px;
  // font-size: 16px;
}
.container {
  width: 300px;
  margin-top: 15px;
  margin-left: 30px;
  border: 1px solid #e8e8e8;
  border-bottom: 0px;
    // border-radius: 10px;
  .feedback {
    height: 35px;
    line-height: 35px;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #e8e8e8;
    font-size: 12px;
    padding-left: 8px;

  }
  .feedback_id {
    padding-right: 15px;
  }
}
</style>
